<template>
    <el-tabs :tab-position="tabPosition" class="tabs" type="card">
        <el-tab-pane label="markdown编辑器">
            <EditorMd :height="contentHeight" />
        </el-tab-pane>
        <el-tab-pane label="流程图">
            <LogicFlow />
        </el-tab-pane>
    </el-tabs>
</template>

<script setup>
    import LogicFlow from './logic-flow/index.vue'
    import EditorMd from './editormd.vue'
    import { onMounted, ref, provide } from 'vue'

    const tabPosition = 'top'
    let contentHeight = ref(0)
    provide('contentHeight', contentHeight)

    onMounted(() => {
        const el = document.getElementsByClassName('el-tabs__content')[0]
        contentHeight.value = el.clientHeight
    })
</script>

<style lang="less" scoped>
    .tabs {
        width: 98%;
        margin: auto;
        height: 98vh;
        /deep/ .el-tabs__content {
            height: calc(100% - 55px);
        }
    }
</style>
